<template>
    <div class="base">
        <UserInfoCard :count="score" class="top_part"></UserInfoCard>
        <div>
            <ul>
                <li v-for="item in AskData" :key="item.QID" v-if="current==item.QID">
                    <AnsCard @NextQ="NextQ" :Gid="item.Gid" :Qcontent="item.Q_content" :btnA="item.Q_Select_A" :btnB="item.Q_Select_B" :btnC="item.Q_Select_C" :btnD="item.Q_Select_D"></AnsCard>
                </li>
            </ul>
        </div>
    </div>    
</template>

<script>
import UserInfoCard from '@/components/SelfPlay/UserInfoCard_context'
import AnsCard from '@/components/SelfPlay/AnsCard'
export default {
    components:{
        UserInfoCard,AnsCard
    },
    data(){
        return {
            AskData:[],
            current:0,
            score:0,
            wrongCount:0,
            WrongList:[]
        }
    },
    mounted(){
        this.GetQuestions()
    },
    methods:{
        GetQuestions(){
            this.$http.post(this.$config.GetGameQuestions,{
                bookid:this.$store.state.currentBookID
            }).then(res=>{
                if (res.data.Success==true) {
                    this.AskData=res.data.Mydata
                }
            }).catch(err=>{
                this.$toast.fail('资源获取失败！')
            })
        },
        NextQ(score,Gid){
            this.score=this.score+score;
            if (score==0) {  //是否为错题
                this.wrongCount++
                this.WrongList.push(Gid)
            }
            if (this.wrongCount>=3) {   //错题是否大于3
                this.$router.push({
                    name:'splayresult',
                    params:{
                        CurrentNumber:this.current,
                        WList:this.WrongList
                    }
                })
            }
            //计算完毕再加
            this.current++

        }
    }
}
</script>

<style scoped>
.base{
    background-image: url("http://127.0.0.1:8081/Back.PNG");
    height: 100vh;
    width: 100vw;
    background-size: 100% 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
    background-attachment: fixed;
}
.top_part{
    /* border: 1px solid red; */
    margin-top: 5vh;
}
</style>
